<!DOCTYPE html>
<html lang="en">
<head>
    <title>PC功能树</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <link rel="stylesheet" href="/static/lib/layuiadmin/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="/static/lib/layuiadmin/style/admin.css" media="all">
    <style>
        html,body{height: 100%;}
        .layui-fluid{height: 96%;}
        .layui-row,.layui-col-xs4,.layui-card,.layui-col-xs8{height: 100%;}
    </style>
    <script type="text/javascript" src="../../common/jquery-3.3.1.min.js"></script>
    <script type="text/javascript" src="/static/lib/layuiadmin/layui/layui.js"></script>
    <script type="text/javascript">

    </script>
    <script type="text/javascript" src="../../common/common.js"></script>
    <script type="text/javascript" src="../../common/utils.js"></script>

    <script type="text/javascript" src="sysFunction.js"></script>
</head>

<body style="margin:0;padding:0px;border:0;width:100%;height:100%;">
<div class="layui-fluid" id="LAY-component-grid-mobile">
    <div class="layui-row layui-col-space10">
        <div class="layui-col-xs4" style="height: 100%">
            <div class="layui-card" >
                <div class="layui-card-header">功能列表</div>
                <div class="layui-card-body" style="height: 700px; overflow: auto">
                    <div class="" style="border-bottom:0;padding:0px;margin-bottom: 10px;">
                        <form class="layui-form" action="">
                            <table style="width:98%; table-layout:fixed; margin-left: 15px;">
                                <tr>
                                    <td style='width:80px; text-align: right'>
                                        <a id="addBaseFunBtn" class="layui-btn layui-btn-sm"> <i class="layui-icon">&#xe654;</i> 增加根节点</a>
                                        <a id="addPeerFunBtn" class="layui-btn layui-btn-sm"> <i class="layui-icon">&#xe654;</i> 增加同级节点</a>
                                        <a id="addChildFunBtn" class="layui-btn layui-btn-sm"> <i class="layui-icon">&#xe654;</i> 增加子级节点</a>
                                        <a id="removeFunBtn" class="layui-btn layui-btn-sm st_back1" lay-event="edit"><i class='layui-icon'>&#xe640;</i>删除</a>
                                    </td>
                                </tr>
                            </table>
                        </form>
                    </div>
                    <div >
                        <ul id="functionTree"></ul>
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-col-xs8" style="height: 100%">
            <div class="layui-card">
                <div class="layui-card-header">功能明细<span style="color: red" class="funText"></span></div>
                <div class="layui-card-body" id="edit_node">
                    <form class="layui-form" lay-filter="formTest" action="">
                        <div class="layui-form-item">
                            <label class="layui-form-label">父功能名：</label>
                            <label id="parentName"  class="layui-form-label"></label>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">功能名称：</label>
                            <div class="layui-input-block">
                                <input id="functionName" maxlength="25" style="width:500px;" type="text" name="functionName" lay-verify="required" class="layui-input"/>
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">功能URL：</label>
                            <div class="layui-input-block">
                                <input id="functionUrl" maxlength="200" style="width:500px;" type="text" name="functionUrl" lay-verify="required" class="layui-input"/>
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">顺&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;序：</label>
                            <div class="layui-input-block">
                                <input id="functionSort" maxlength="8" style="width:500px;" type="text" name="functionSort" lay-verify="required" class="layui-input"/>
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">功能状态：</label>
                            <div class="layui-input-block">
                                <input type="radio" name="functionState" value="1" title="有效">
                                <input type="radio" name="functionState" value="3" title="菜单停用">
                            </div>
                        </div>
                        <div class="layui-col-xs2">
                            <label class="layui-form-label">图&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;标：</label>
                            <div class="layui-input-block" style="height:300px">
                                <img id="icon" alt="图标" src="/images/icon/timg.gif" style="height:180px;width:150px;">
                                <button type="button" class="layui-btn" id="upload" style="margin: 10px 0 0 20px;">
                                    <i class="layui-icon">&#xe67c;</i>上传图片
                                </button>
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <div class="layui-input-block" style="padding-left: 400px">
                                <button class="layui-btn" lay-submit="" lay-filter="sub">保存</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

</body>

</html>